<!-- 主容器 -->
<div class="oli-wrapper">
    <!-- 头部视图 -->
    <div ui-view="header" class="oli-wrapper__header"></div>

    <!-- 目录视图 -->
    <div ui-view="sideMenu" class="oli-wrapper__sideMenu" ng-class="[wrapperVM.MenuMin === 'open' ? '':'oli-wrapper__sideMenu__left']"></div>

    <!-- 缩起按钮 -->
    <span class="oli-wrapper__close" ng-class="[wrapperVM.MenuMin === 'open' ? '':'oli-wrapper__close__left']" ng-click="wrapperVM.MenuMinMaxChangeFun();">{{wrapperVM.MenuMinMark}}</span>

    <!-- 主容器 -->
    <div class="oli-wrapper__content" ng-class="[wrapperVM.MenuMin === 'open' ? '':'oli-wrapper__content__left']">
        <!-- tab显示区域 -->
        <div class="oli-wrapper__content__tab">
            <span class="tab__scroller__left" ng-if="wrapperVM.scrollLeft" ng-click="wrapperVM.scrollHorizontal($event);">◀</span>
            <span class="tab__scroller__right" ng-if="wrapperVM.scrollRight" ng-click="wrapperVM.scrollHorizontal($event);">▶</span>
            <ul class="oli-wrapper__content__tab__ul" style="margin-left: 0%;"><!-- col-lg-1 col-md-2 col-sm-2 col-xs-4 -->
                <li ng-repeat="item in wrapperVM.data" ng-class="{true: 'active'}[wrapperVM.tabTitle === item.name]"  ng-click="wrapperVM.qs_on(item)"><!-- ui-sref="{{item.href}}" -->
                    <a href="javascript:;">
                        {{item.name}}
                    </a>
                    <i ng-if="$index != 0" ng-click="wrapperVM.qs_off($index,item);">×</i>
                </li>
            </ul>
        </div>

        <!-- 内容显示区域 -->
        <div ui-view class="oli-wrapper__content__main"></div>
    </div>

    <!-- 底部视图 -->
    <div ui-view="footer" class="oli-wrapper__footer"></div>

</div>

